<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="客户名称"
          @keyup.enter.native="getData()"
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['gua_type.eq']"
          @change="getData()"
          :options="enumGuaType"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="合同审批状态"
          v-model="params['contract_approval_status.eq']"
          :options="{
            0: '合同处理中',
            1: '审批中',
            2: '审批完成',
            3: '已选择签约类型',
          }"
          clearable
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['renewal_type.eq']"
          clearable
          placeholder="展期/续贷/借新还旧"
          :options="enumRenewalType"
          @change="getData()"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:letter="scope">
        <div
          class="badge cursor-pointer"
          :class="`badge-${scope.row.letterStatusStyle}`"
          @click="showLetter(scope.row)"
        >
          {{ scope.row.letterStatusLabel }}
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <contract-edit
      :visible.sync="contractVisible"
      :query-id="editId"
      @success="handleSuccess"
    ></contract-edit>
    <base-dialog :visible.sync="editVisible" :query-id="queryId"></base-dialog>

    <approve-edit-dialog
      :visible.sync="approveVisible"
      :query-id="relatedId"
      :is-re-letter="true"
      @success="getData()"
    ></approve-edit-dialog>

    <el-dialog :visible.sync="letterVisible" width="840px">
      <letter-view :query-id="letterQueryId"></letter-view>
    </el-dialog>

    <attach-dialog :visible.sync="attachVisible" :query-id="attachRelatedId"></attach-dialog>

    <list-dialog :visible.sync="signVisible" :related-id="customerRelatedId"></list-dialog>
  </div>
</template>

<script>
import ContractEdit from '@/credit/views/county/unionProvince/components/contractApproveDeploy/ContractEdit'
import BaseDialog from '@/cadmin/views/org/components/BaseDialog'
import ApproveEditDialog from '@/credit/views/county/unionProvince/components/ApproveEditDialog'
import LetterView from '@/credit/views/county/unionProvince/components/LetterView'
export const enumLetterStatus = {
  '-1': { label: '未立项', style: 'warning' },
  0: { label: '未签章', style: 'info' },
  1: { label: '已签章', style: 'success' },
  2: { label: '已签章', style: 'success' },
  3: { label: '已作废', style: 'danger' },
}
const enumRenewalType = {
  1: '展期项目',
  2: '续贷项目',
  3: '借新还旧',
  4: '无还本续贷',
}
import AttachDialog from '@/cadmin/views/org/components/AttachDialog'
import ListDialog from '@/cadmin/views/org/components/sign/ListDialog'
export default {
  components: {
    ContractEdit,
    BaseDialog,
    ApproveEditDialog,
    LetterView,
    AttachDialog,
    ListDialog,
  },
  data() {
    return {
      enumRenewalType,
      enumGuaType: {
        4: '省联担',
        2: '直担',
      },
      loading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'service_name' } },
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' }, slot: 'type' },
        { attrs: { label: '处理人', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '创建时间', prop: 'create_time', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        {
          attrs: { label: '担保意向函', prop: 'letterStatusLabel', align: 'center' },
          slot: 'letter',
        },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            {
              content: '更改担保意向函',
              icon: 'fa fa-file-text-o',
              event: this.handleItem,
            },
            {
              content: '重做合同',
              icon: 'fa fa-file',
              event: this.handleContract,
              // ifRender: row => +row.loan_approval_status === 0 && +row.contract_approval_status > 1,
            },
            {
              content: '合同编辑',
              icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            { content: '上传附件', icon: 'fa fa-clipboard', event: this.hanleAttach },
            { content: '签约', icon: 'fa fa-chain-broken', event: this.handlerSign },
          ],
        },
      ],
      params: {
        index: 1,
        size: 15,
        customer_name: '',
        'gua_type.neq': 3,
        // 'project_res_status.eq': 2,
        // 'loan_approval_status.eq': 0,
        // 'confuse_status.neq': 3,
        subKey: 'ele_letter_info.customer_related_id',
      },
      serviceName: '',
      contractVisible: false,
      editId: '',
      editVisible: false,
      queryId: '',

      approveVisible: false,
      relatedId: '',
      letterVisible: false,
      letterQueryId: '',

      attachVisible: false,
      attachRelatedId: '',

      signVisible: false,
      customerRelatedId: '',
    }
  },

  created() {
    this.getData()
  },
  methods: {
    handlerSign(row = {}) {
      this.signVisible = true
      this.customerRelatedId = row.customer_related_id || ''
    },
    hanleAttach(row) {
      this.attachVisible = true
      this.attachRelatedId = row.customer_related_id
    },

    showLetter(row) {
      if (row.docId) {
        this.letterVisible = true
        this.letterQueryId = row.customer_related_id
      }
    },
    handleItem(row) {
      this.approveVisible = true
      this.relatedId = row.customer_related_id || ''
    },
    handleSuccess() {
      this.getData()
      this.queryId = ''
    },
    handleEdit(row) {
      this.queryId = row.customer_related_id
      this.editVisible = true
    },
    handleContract(row) {
      this.contractVisible = true
      this.editId = row.customer_related_id
    },
    getData() {
      this.loading = true
      this.$api
        .getData('credit', 'customer_related', this.params, { create_time: 'desc' })
        .then(res => {
          this.tableData = (res?.data?.data || []).map(this.dataAdapter)
          this.totalCount = res?.data?.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      const letters = (item?.ele_letter_info ?? []).filter(item => +item.ele_letter_type === 1)
      const normalLetter = letters.sort((a, b) => a.sign_status - b.sign_status)
      item.letterStatus = normalLetter?.[0]?.sign_status ?? -1
      const letterStatusObj = enumLetterStatus[item.letterStatus] || {}
      item.docId = normalLetter?.[0]?.doc_id || ''
      item.letterStatusLabel = letterStatusObj.label
      item.letterStatusStyle = letterStatusObj.style

      return item
    },
  },
}
</script>
<style lang="scss" scoped></style>
